<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.imgdiv{
				width: 222px;
				height: 222px;
				position: absolute;
				
			}
			.imgdiv img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div data-rotx ="5" data-roty = "8" class="imgdiv" style="top: 200px;left: 300px;">
			<img src="img/ch0.png" style="opacity: 0.1;"/>
			<img src="img/ch1.png" style="opacity: 0.4;"/>
			<img src="img/ch2.png" style="opacity: 0.3;"/>	
		</div>
		<div data-rotx ="7" data-roty = "4" class="imgdiv" style="top: 5px;left: 5px;">
			<img src="img/ch0.png" style="opacity: 0.7;"/>
			<img src="img/ch1.png" style="opacity: 0.1;"/>
			<img src="img/ch2.png" style="opacity: 0.8;"/>	
		</div>
		<script type="text/javascript">
			function createImg(){
				for (var i = 0; i < 3; i++) {
					var div=document.createElement("div");
					div.className = "imgdiv";
					for (var k = 0; k < 3; k++) {
					var img=document.createElement("img");
					img.src="img/ch" + k + ".png";
					div.appendChild(img);
					}
					document.body.appendChild(div);
				}
			}
			setInterval(function(){
				moveImg();
			},500);
			function moveImg(){
				var divs=document.getElementsByTagName("div");
				var Height=document.documentElement.clientHeight;
				var Width=document.documentElement.clientWidth;
				
				for (var i = 0; i < divs.length; i++) {
					var rotx = parseInt(divs[i].getAttribute("data-rotx"));
					var roty = parseInt(divs[i].getAttribute("data-roty"));
					var top = parseInt(divs[i].style.top);
					var left = parseInt(divs[i].style.left);
					top += roty;
					left += rotx;
					divs[i].style.top = top + "px";
					divs[i].style.left = left + "px";
					console.log(top,left);
					if(top > Height - 228 || top < 5){
						roty = -roty;
					}
					if(left > Width - 228 || left < 5){
						rotx = -rotx;
					}
					divs[i].setAttribute("data-rotx",rotx);
					divs[i].setAttribute("data-roty",roty);
				}
			}
		</script>
	</body>
</html>
